<template>
  <main class="page" :style="pageStyle">
    <ModuleTransition style="position: relative">
      <!--  -->
      <div
        v-show="recoShowModule && $page.title"
        class="page-title"
        ref="pageTitle"
      >
        <PageBgImg />
        <h1>{{ $page.title }}</h1>

        <hr />
        <PageInfo
          :pageInfo="$page"
          :showAccessNumber="showAccessNumber"
        ></PageInfo>
      </div>
    </ModuleTransition>

    <ModuleTransition delay="0.08">
      <Content v-show="recoShowModule" class="theme-reco-content" />
    </ModuleTransition>

    <ModuleTransition delay="0.16">
      <footer v-show="recoShowModule" class="page-edit">
        <div class="edit-link" v-if="editLink">
          <a :href="editLink" target="_blank" rel="noopener noreferrer">{{
            editLinkText
          }}</a>
          <OutboundLink />
        </div>

        <div class="last-updated" v-if="lastUpdated">
          <span class="prefix">{{ lastUpdatedText }}: </span>
          <span class="time">{{ lastUpdated }}</span>
        </div>
      </footer>
    </ModuleTransition>

    <ModuleTransition delay="0.24">
      <div class="page-nav" v-if="recoShowModule && (prev || next)">
        <p class="inner">
          <span v-if="prev" class="prev">
            ←
            <router-link v-if="prev" class="prev" :to="prev.path">
              {{ prev.title || prev.path }}
            </router-link>
          </span>

          <span v-if="next" class="next">
            <router-link v-if="next" :to="next.path">
              {{ next.title || next.path }}
            </router-link>
            →
          </span>
        </p>
      </div>
    </ModuleTransition>

    <ModuleTransition delay="0.32">
      <Comments v-if="recoShowModule" :isShowComments="shouldShowComments" />
    </ModuleTransition>

    <ModuleTransition delay="0.4">
      <SubSidebar class="side-bar" />
    </ModuleTransition>
  </main>
</template>

<script>
import PageInfo from "@theme/components/PageInfo";
import { resolvePage, outboundRE, endingSlashRE } from "@theme/helpers/utils";
import ModuleTransition from "@theme/components/ModuleTransition";
import moduleTransitonMixin from "@theme/mixins/moduleTransiton";
import SubSidebar from "@theme/components/SubSidebar";
import PageBgImg from "@theme/components/PageBgImg";

export default {
  mixins: [moduleTransitonMixin],
  components: { PageInfo, ModuleTransition, SubSidebar, PageBgImg },

  props: ["sidebarItems"],
  mounted() {
    setTimeout(() => {
      this.pageTitleHeight = this.$refs.pageTitle.clientHeight;
      // this.pTbgBar = document.querySelector(".pt-bgBar");
      // this.pTbgBar.style.opacity = "0";
      document.documentElement.scrollTop = 0;
    }, 100);

    window.addEventListener("scroll", this.handleScrollChange);
  },
  data() {
    return {
      isHasKey: true,
    };
  },

  computed: {
    // 是否显示评论
    shouldShowComments() {
      const { isShowComments } = this.$frontmatter;
      const { showComment } = this.$themeConfig.valineConfig || {
        showComment: true,
      };
      return (
        (showComment !== false && isShowComments !== false) ||
        (showComment === false && isShowComments === true)
      );
    },
    showAccessNumber() {
      const {
        $themeConfig: { valineConfig },
        $themeLocaleConfig: { valineConfig: valineLocalConfig },
      } = this;

      const vc = valineLocalConfig || valineConfig;
      if (vc && vc.visitor != false) {
        return true;
      }
      return false;
    },
    lastUpdated() {
      return this.$page.lastUpdated;
    },
    lastUpdatedText() {
      if (typeof this.$themeLocaleConfig.lastUpdated === "string") {
        return this.$themeLocaleConfig.lastUpdated;
      }
      if (typeof this.$themeConfig.lastUpdated === "string") {
        return this.$themeConfig.lastUpdated;
      }
      return "Last Updated";
    },
    prev() {
      const prev = this.$frontmatter.prev;
      if (prev === false) {
        return;
      } else if (prev) {
        return resolvePage(this.$site.pages, prev, this.$route.path);
      } else {
        return resolvePrev(this.$page, this.sidebarItems);
      }
    },
    next() {
      const next = this.$frontmatter.next;
      if (next === false) {
        return;
      } else if (next) {
        return resolvePage(this.$site.pages, next, this.$route.path);
      } else {
        return resolveNext(this.$page, this.sidebarItems);
      }
    },
    editLink() {
      if (this.$frontmatter.editLink === false) {
        return false;
      }
      const {
        repo,
        editLinks,
        docsDir = "",
        docsBranch = "master",
        docsRepo = repo,
      } = this.$themeConfig;

      if (docsRepo && editLinks && this.$page.relativePath) {
        return this.createEditLink(
          repo,
          docsRepo,
          docsDir,
          docsBranch,
          this.$page.relativePath
        );
      }
      return "";
    },
    editLinkText() {
      return (
        this.$themeLocaleConfig.editLinkText ||
        this.$themeConfig.editLinkText ||
        `Edit this page`
      );
    },
    pageStyle() {
      const headers = this.$page.headers || [];
      return headers.length > 0 ? {} : { paddingRight: "0" };
    },
  },
  ScrollTimer: -1,
  methods: {
    createEditLink(repo, docsRepo, docsDir, docsBranch, path) {
      const bitbucket = /bitbucket.org/;
      if (bitbucket.test(repo)) {
        const base = outboundRE.test(docsRepo) ? docsRepo : repo;
        return (
          base.replace(endingSlashRE, "") +
          `/src` +
          `/${docsBranch}/` +
          (docsDir ? docsDir.replace(endingSlashRE, "") + "/" : "") +
          path +
          `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
        );
      }

      const base = outboundRE.test(docsRepo)
        ? docsRepo
        : `https://github.com/${docsRepo}`;
      return (
        base.replace(endingSlashRE, "") +
        `/edit` +
        `/${docsBranch}/` +
        (docsDir ? docsDir.replace(endingSlashRE, "") + "/" : "") +
        path
      );
    },
    handleScrollChange(e) {
      clearTimeout(this.ScrollTimer);

      this.ScrollTimer = setTimeout(() => {
        let prop = document.documentElement.scrollTop / this.pageTitleHeight;
        // console.log(prop);
        if (prop > 1 || isNaN(prop)) {
          prop = 1;
        }
        // console.log(root);
        let root = document.querySelector(":root");
        // console.log(root);
        root.style.setProperty('--nav-opacity',prop);
      }, 100);
    },
  },
  destroyed() {
    // 删除滚动监听事件，再将navbar的透明值设置回1
    window.removeEventListener("scroll", this.handleScrollChange);
    // this.pTbgBar.style.opacity = "1";
  },
};

function resolvePrev(page, items) {
  return find(page, items, -1);
}

function resolveNext(page, items) {
  return find(page, items, 1);
}

function find(page, items, offset) {
  const res = [];
  flatten(items, res);
  for (let i = 0; i < res.length; i++) {
    const cur = res[i];
    if (cur.type === "page" && cur.path === decodeURIComponent(page.path)) {
      return res[i + offset];
    }
  }
}

function flatten(items, res) {
  for (let i = 0, l = items.length; i < l; i++) {
    if (items[i].type === "group") {
      flatten(items[i].children || [], res);
    } else {
      res.push(items[i]);
    }
  }
}
</script>

<style lang="stylus">
@require '../styles/wrapper.styl';

.page {
  position: relative;
  // padding-top 5rem
  // padding-bottom 2rem
  // padding-right 14rem
  display: block;

  /* .side-bar {
      position: fixed;
      top: 18rem;
      bottom: 10rem;
      right: 2rem;
      overflow-y: scroll;
  
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
    } */
  .page-title {
    max-width: $contentWidth;
    margin: 0 auto;
    padding: 1rem 2.5rem;
    // color var(--text-color)
    color: $myTextColor;
    // padding 5rem 0
    padding-top: 10rem;
    padding-bottom: 10rem;

    .iconfont {
      color: var(--mytext-color);
    }
  }

  .page-edit {
    @extend $wrapper;
    padding-top: 1rem;
    padding-bottom: 1rem;
    overflow: auto;

    .edit-link {
      display: inline-block;

      a {
        color: $accentColor;
        margin-right: 0.25rem;
      }
    }

    .last-updated {
      float: right;
      font-size: 0.9em;

      .prefix {
        font-weight: 500;
        color: $accentColor;
      }

      .time {
        font-weight: 400;
        color: #aaa;
      }
    }
  }

  .comments-wrapper {
    @extend $wrapper;
  }
}

.page-nav {
  @extend $wrapper;
  padding-top: 1rem;
  padding-bottom: 0;

  .inner {
    min-height: 2rem;
    margin-top: 0;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    overflow: auto; // clear float
  }

  .next {
    float: right;
  }
}

@media (max-width: $MQMobile) {
  .page {
    padding-right: 0;

    .side-bar {
      display: none;
    }

    .page-title {
      padding-top: 2rem;
      padding-bottom: 2rem;
    }

    .page-edit {
      .edit-link {
        margin-bottom: 0.5rem;
      }

      .last-updated {
        font-size: 0.8em;
        float: none;
        text-align: left;
      }
    }
  }
}
</style>
